<script setup lang='ts'>
import { ref } from 'vue'
import { useMusicStore } from '@/store/listMusic'

const useStore = useMusicStore()




</script>

<template>
<view>
  <image src="https://zyxcl.github.io/music/assets/needle-ab-63009d3f.png" class="strip"></image>
  <view class="song-circle">
    <image :src="useStore.song?.al.picUrl" :style="{animation: !useStore.isSong? 'rotate 10s infinite linear' : ''}"></image>
  </view>
</view>
</template>

<style scoped lang="scss">
  .strip{
      position: absolute;
      left: 52%;
      top: 155rpx;
      width: 200rpx;
      height: 280rpx;
      transform: rotate(-17deg);
    }
    .song-circle{
      width: 100%;
      margin-top: 320rpx;
      image{
        display: block;
        width: 300rpx;
        height: 300rpx;
        border-radius: 50%;
        margin: 0 auto;
        border: 80rpx solid #000;
        box-shadow: 0 0 40rpx #ddd;
        animation: rotate 10s infinite linear;
      }
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
</style>
